
import { useState, useRef, useEffect } from 'react'
import { message, Button, Form, Input, notification } from 'antd'
import { useSelector } from 'react-redux'
import bus from '../../utils/eventBus'
import './index.scss'
const ModifyPwd = () => {
    const { id } = useSelector((state: any) => state.userReducer.userInfo)
    const formRef = useRef<any>(null)
    const [loading, setLoading] = useState<boolean>(false)
    const [num, setNum] = useState<number>(3)
    const timer = useRef<any>(null)
    const validatorOldPwd = (rule: any, value: any, callback: any) => {
        if (!value || !value.replace(" ", "")) {
            callback(new Error('请输入旧密码'))
            return
        } else if (value.includes(' ')) {
            callback(new Error('旧密码不能包含空格'))
            return
        } else if (value.length < 5) {
            callback(new Error('旧密码长度不能小于5位'))
            return
        }
        callback()
    }
    const validatorNewPwd = (rule: any, value: any, callback: any) => {
        if (!value) {
            callback(new Error('请输入新密码'))
            return
        } else if (value.includes(' ')) {
            callback(new Error('新密码不能包含空格'))
            return
        } else if (value.length < 5) {
            callback(new Error('新密码长度不能小于5位'))
            return
        }
        callback()
    }
    const validatorNewPwd2 = (rule: any, value: any, callback: any) => {
        const { newPwd } = formRef.current.getFieldsValue()
        if (!value) {
            callback(new Error('请再次输入新密码'))
            return
        } else if (value.includes(' ')) {
            callback(new Error('新密码不能包含空格'))
            return
        } else if (value.length < 5) {
            callback(new Error('新密码长度不能小于5位'))
            return
        } else if (newPwd !== value) {
            callback(new Error('两次新密码不一致'))
            return
        }
        callback()
    }
    const handleSava = () => {
        formRef.current.validateFields().then((res: any) => {
            const params = {
                ...res,
                userId: id
            }
            setLoading(true)
            window.chromePro.modPassword(JSON.stringify(params))
        }).catch((err: any) => { })

    }
    const modPasswordFinished = (res: any) => {
        setLoading(false)
        if (res.code === 200) {
            formRef.current.resetFields()
            message.success(res.msg);
        } else {
            message.error(res.msg);
        }
    }
    useEffect(() => {
        bus.addListener("modPasswordFinished", modPasswordFinished);
    }, [])
    useEffect(() => {
        return () => {
            bus.removeListener("modPasswordFinished", modPasswordFinished);
        }
    }, [])
    return (
        <>
            <div className="edit-box">
                <div className="edit-form">
                    <span style={{ fontWeight: 600, color: 'rgba(33, 33, 33, 100)', fontSize: '18px' }}>修改密码</span>
                    <div className="form">
                        <Form ref={formRef} style={{ width: '100%', margin: '0px auto' }}>
                            <Form.Item name="oldPwd" rules={[{ required: true, validator: validatorOldPwd }]}>
                                <Input.Password placeholder='请输入旧密码' />
                            </Form.Item>
                            <Form.Item name="newPwd" rules={[{ required: true, validator: validatorNewPwd }]}>
                                <Input.Password placeholder='请输入新密码' />
                            </Form.Item>
                            <Form.Item name="newPwd2" rules={[{ required: true, validator: validatorNewPwd2 }]}>
                                <Input.Password placeholder='请再次输入新密码' />
                            </Form.Item>
                        </Form>
                        <div className="footer">
                            <Button
                                onClick={handleSava}
                                style={{ width: '100%', height: '46px', marginTop: '16px', fontSize: '16px' }}
                                type="primary"
                                className="footer-btn"
                                loading={loading}
                            >
                                确认修改
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default ModifyPwd